<template>
    <view class="container">
        <!-- <custom-header title="" /> -->
        <view class="banner">
            <image style="width: 100%; height: 100%" :src="shopDetail?.shopImage" mode="" />
        </view>



        <view class="storeInfo_box">
            <view class="titleBox">
                <view class="title">{{ shopDetail.shopName }}</view>
                <view class="icon_box">
                    <image class="title_icon" src="/static/images/phone_icon.png" mode="" />
                    <image class="title_icon" src="/static/images/share_icon2.png" mode="" />
                </view>
            </view>
            <view class="store_price">￥{{ shopDetail.minCost }}起/小时</view>
            <view class="store_addres" @tap="goMap">{{ shopDetail.shopAddress }}-{{ shopDetail.distance }}米</view>
            <view class="store_tips">
                2025年1月开业
                <text class="tips_text">免押金</text>
                <text class="tips_text">畅打月卡</text>
                <text class="tips_text">免费停车</text>
            </view>
        </view>

        <!-- Tab栏 -->
        <view class="tab-bar">
            <view :class="'tab-item ' + (currentTab === 0 ? 'active_font' : '')" @click="switchTab(0)">
                <image class="active" src="/static/images/active_icon.png" v-if="currentTab == 0" mode="" />
                桌台
            </view>
            <view :class="'tab-item ' + (currentTab === 1 ? 'active_font' : '')" @click="switchTab(1)">
                <image class="active" src="/static/images/active_icon.png" v-if="currentTab == 1" mode="" />
                助教
            </view>
        </view>

        <!-- 内容区域 -->
        <view class="scroll-content">
            <!-- 桌台类型 -->
            <block v-if="currentTab === 0">
                <view class="content-item">
                    <scroll-view class="tabs-box" scroll-x >
                        <view
                            :class="'tabs-item ' + (currentTab2 === index ? 'active_TZ' : '')"
                            @click="changeTz(item,index)"
                            :data-index="index"
                            v-for="(item, index) in TZ_list"
                            :key="index"
                        >
                            {{ item.typeName }}
                        </view>
                    </scroll-view>
                    <!-- 台桌列表 -->
                    <scroll-view class="content-item" scroll-y :style="'height: ' + scrollHeight + 'rpx;'">
                        <view class="Tz-box">
                            <!-- class="tz-item" v-for="{{TZ_DataList}}" wx:key="index" style="{{item.state == 1 ? 'background-image: url(/images/taizhuo_bg1.png); background-size: cover;' : 'background-image: url(/images/taizhuo_bg2.png); background-size: cover;'}}" -->
                            <view
                                class="tz-item"
                                v-for="item in filteredTZList"
                                :key="item.id"
                            >
                                <view class="set_info" v-if="item.state == 1" @click="showPopup">立即预约</view>

                                <view class="set_info">{{ item.number }}</view>

                                <view class="set_info_loading" v-if="item.state == 2">
                <view style="font-weight: 400;font-size: 28rpx;color: #999999;text-align: center;">预计等待</view>
                <view>{{item.loading_time}}</view>
              </view>
                            </view> 
                        </view>
                    </scroll-view>
                </view>
            </block>

            <!-- 助教内容 -->
            <block v-else-if="currentTab === 1">
                <scroll-view class="content-item" scroll-y :style="'height: ' + scrollHeight + 'rpx;'">
                    <!-- 原有助教内容结构 -->
                    <view class="tab_list">
                        <view class="list_item" v-for="(item, index) in teachList" :key="index">
                            <view class="head_box">
                                <image class="headimg" :src="item.image" mode="" />
                                <view class="level_text">{{ item.tutorGrade }}</view>
                            </view>

                            <view class="teach_infoBox">
                                <view class="row_box">
                                    <view class="name">{{ item.tutorname }}</view>
                                    <view class="stateColor" :style="'background:' + (item.status == 1 ? '#36BD54' : 'red')"></view>
                                    <view class="userState_text">{{ item.status == 1 ? '在线' : '离线' }}</view>
                                </view>
                                <view class="row_box">
                                    <view class="rows_item sexBox" :style="'background:' + (item.user_state == 1 ? 'rgba(233,244,252,0.1);' : 'rgba(254,239,243,0.1);')">
                                        <image class="sex_icon" v-if="item.gender == 1" src="/static/images/boy_icon.png" mode="" />
                                        <image class="sex_icon" v-else src="/static/images/girl_icon.png" mode="" />
                                        <view class="age_text" :style="'color:' + (item.sex == 1 ? '#1E8FE0' : '#EF567E')">{{ item.age }}</view>
                                    </view>
                                    <view class="rows_item" v-if="item.status == 1">休息中</view>
                                    <view class="rows_item" v-if="item.status == 2">空闲中</view>
                                    <view class="rows_item" v-if="item.status == 3">忙碌中</view>
                                    <view class="rows_item">从业{{ item.year }}年</view>
                                </view>
                                <view class="tips_box">
                                    {{ item.message }}
                                </view>
                                <view class="bottom_infoBox">
                                    <view class="price_text">
                                        ￥
                                        <text style="font-size: 30rpx; font-weight: bold">{{ item.hourlyPrice }}</text>
                                        /小时
                                    </view>
                                    <!-- <view class="Btn">立即预约</view> -->
                                </view>
                            </view>
                        </view>
                    </view>
                </scroll-view>
            </block>
        </view>

        <!-- 遮罩层 -->
        <view class="mask" v-if="showPopup" @tap="hidePopup"></view>

        <!-- 时间选择弹窗 -->
        <view class="popup" v-if="showPopup">
            <view class="header">立即预约</view>

            <!-- 时间选择区域 -->
            <view class="time-picker-box">
                <!-- 开始时间 -->
                <view class="time-section">
                    <view class="time-label">当天 06:00</view>
                    <view class="time-label time-label2">开始时间</view>
                    <picker-view class="time-picker" :value="startIndex" @change="bindStartChange">
                        <picker-view-column>
                            <view class="column-item" v-for="(item, index) in hours" :key="index">{{ item }}时</view>
                        </picker-view-column>
                        <picker-view-column>
                            <view class="column-item" v-for="(item, index) in minutes" :key="index">{{ item }}分</view>
                        </picker-view-column>
                    </picker-view>
                </view>

                <!-- 结束时间 -->
                <view class="time-section">
                    <view class="time-label">当天 06:00</view>
                    <view class="time-label time-label2">结束时间</view>
                    <picker-view class="time-picker" :value="endIndex" @change="bindEndChange">
                        <picker-view-column>
                            <view class="column-item" v-for="(item, index) in hours" :key="index">{{ item }}时</view>
                        </picker-view-column>
                        <picker-view-column>
                            <view class="column-item" v-for="(item, index) in minutes" :key="index">{{ item }}分</view>
                        </picker-view-column>
                    </picker-view>
                </view>
            </view>

            <!-- 底部操作栏 -->
            <view class="footer">
                <view class="tipBox">
                    <view class="tips1">
                        <view>押金</view>
                        <view>￥50</view>
                    </view>
                    <view class="tips2">预约需要支付押金，结束即退押金</view>
                </view>
                <button class="submit-btn" @tap="confirmTime">立即预约 ¥50</button>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getShopDetail, getTableType, getTableList, getTutorList } from '@/api/store/index';
// 响应式数据
const currentTab = ref(0);
const currentTab2 = ref(0);
const scrollHeight = ref(0);
const showPopup = ref(false);
const TZ_typeCurrentID = ref(1);
const shopDetail = ref(null);

// 时间选择相关数据
const hours = Array.from({ length: 24 }, (_, i) => i);
const minutes = Array.from({ length: 60 }, (_, i) => i);
const startIndex = ref([6, 0]);
const endIndex = ref([8, 0]);

// 列表数据
const teachList = ref([
    {
        level: 1,
        name: '小娜',
        user_state: 1,
        sex: 2,
        age: 18,
        pre_state: 1,
        duration: 5,
        price: 188
    },
    {
        level: 2,
        name: '小王',
        user_state: 1,
        sex: 1,
        age: 18,
        pre_state: 1,
        duration: 5,
        price: 188
    },
    {
        level: 3,
        name: '小歌',
        user_state: 1,
        sex: 2,
        age: 18,
        pre_state: 1,
        duration: 5,
        price: 188
    }
]);

const TZ_list = ref([]);
const TZ_DataList = ref([
    {
        Tz_num: 'A01',
        state: 1,
        loading_time: ''
    },
    {
        Tz_num: 'A02',
        state: 1,
        loading_time: ''
    },
    {
        Tz_num: 'A03',
        state: 1,
        loading_time: '00时25分'
    }
]);

// 计算属性
const filteredTZList = computed(() => {
    return TZ_DataList.value.filter(item => item.status === TZ_typeCurrentID.value);
});

// 方法
const showPopupFun = () => {
    showPopup.value = true;
};

const hidePopup = () => {
    showPopup.value = false;
};

const bindStartChange = (e) => {
    startIndex.value = e.detail.value;
};

const bindEndChange = (e) => {
    endIndex.value = e.detail.value;
};

const getDetailData = (id) => {
    const params = {
        shopId: id
    };
    // TODO: 实现API调用
};

const getListData = (type) => {
    const method = type == 0 ? '/wx/app/table/list' : '/wx/app/tutor/list';
    const params = type == 0
        ? { typeId: TZ_typeCurrentID.value || 1 }
        : {};
    // TODO: 实现API调用
};

const getTzType = () => {
    // TODO: 实现API调用
};

const confirmTime = () => {
    const formatTime = (arr) => {
        const h = arr[0].toString().padStart(2, '0');
        const m = arr[1].toString().padStart(2, '0');
        return `${h}:${m}`;
    };
    const start = formatTime(startIndex.value);
    const end = formatTime(endIndex.value);
    if (start >= end) {
        uni.showToast({
            title: '结束时间需晚于开始时间',
            icon: 'none'
        });
        return;
    }
    uni.showToast({
        title: `预约成功：${start} - ${end}`,
        success: () => {
            hidePopup();
        }
    });
};

const switchTab = (e) => {
    const index = parseInt(e);
    if (currentTab.value === index) {
        return;
    }
    currentTab.value = index;
    if(index == 0){
        getTableListData(TZ_list.value[0].id)
    }else{
        getTutorListData()
    }
};

const changeTz = (e,index) => {
    currentTab2.value = index
    getTableListData(e.id)
    console.log(e)
};


const getTutorListData = async () => {
    const res = await getTutorList();
    if (res.code == 200) {
        teachList.value = res.result;
    }
}


const goMap = () => {
    uni.navigateTo({
        url: '/pages/storeMap/index'
    });
};

const getShopDetailData = async (shopId) => {
    const res = await getShopDetail({shopId: shopId});
    if (res.code == 200) {
        shopDetail.value = res.result;
    }
}


//获取台桌类型
const getTableTypeData = async () => {
    const res = await getTableType();
    if (res.code == 200) {
        TZ_list.value = res.result;
        getTableListData(TZ_list.value[0].id)
    }
}

//获取台桌列表
const getTableListData = async (id) => {
    const res = await getTableList({typeId: id});
    if (res.code == 200) {
        TZ_DataList.value = res.result;
    }
}


onLoad((options) => {
    getShopDetailData(options.shopId)
})
// 生命周期钩子
onMounted(() => {
    // 动态计算滚动区域高度
    const systemInfo = uni.getSystemInfoSync();
    scrollHeight.value = systemInfo.windowHeight * 2 - 88; // 88是tab栏高度

    // 获取页面参数
    const pages = getCurrentPages();
    const currentPage = pages[pages.length - 1];
    const options = currentPage.options;
    
    getDetailData(options.shopId);
    getTableTypeData();
    // getListData(0);
});
</script>

<style>
/* 整体容器 */
.container {
    width: 100%;
    background-color: #f5f6f8;
    min-height: 100vh;
}

.banner {
    width: 100%;
    height: 540rpx;
}

.storeInfo_box {
    background: #ffffff;
    width: 660rpx;
    border-radius: 16rpx;
    padding: 24rpx;
    margin-top: -160rpx;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 10%);
}

.titleBox {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.title {
    width: 82%;
    font-weight: bold;
}

.icon_box {
    width: 18%;
    display: flex;
    justify-content: space-between;
}

.title_icon {
    width: 46rpx;
    height: 48rpx;
}

.store_price {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 22rpx;
    color: #000000;
    margin-top: 10rpx;
}

.store_addres {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #999999;
    padding-left: 10rpx;
    margin-top: 10rpx;
}

.store_tips {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #202020;
    margin-top: 30rpx;
}

.tips_text {
    background: #f3f3f3;
    padding: 4rpx 14rpx;
    font-size: 22rpx;
    border-radius: 22rpx;
}

/* 新增修复样式 */
.content-item {
    width: 100%;
    box-sizing: border-box;
}

/* 确保scroll-view能正确滚动 */
scroll-view {
    height: 100%;
}

.tab-bar {
    width: 100%;
    display: flex;
    margin-top: 180rpx; 
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 36rpx;
    color: #666666;
}

.tab-item {
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.tab-item .active {
    position: absolute;
    width: 54rpx;
    height: 14rpx;
    bottom: -18rpx;
    left: 50%;
    transform: translate(-50%, 0);
}

.active_font {
    font-weight: bold;
    color: #202020;
}

.scroll-content {
    margin-top: 30rpx;
}

.tab_list {
    width: 660rpx;
    margin: 0 auto 0;
    box-sizing: border-box;
}

.list_item {
    width: 100%;
    padding: 20rpx 30rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    background: #ffffff;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    margin-top: 30rpx;
}

.head_box {
    width: 30%;
    position: relative;
    display: flex;
    justify-content: center;
}

.headimg {
    width: 140rpx;
    height: 140rpx;
    border-radius: 50%;
}

.level_text {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 22rpx;
    color: #ffffff;
    width: 120rpx;
    height: 40rpx;
    line-height: 40rpx;
    text-align: center;
    background: linear-gradient(90deg, #bd59f0 0%, #7d5feb 100%);
    border-radius: 36rpx 36rpx;
    position: absolute;
    top: 120rpx;
    left: 50%;
    transform: translate(-50%, 0);
}

.teach_infoBox {
    width: 70%;
}

.row_box {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.stateColor {
    width: 14rpx;
    height: 14rpx;
    border-radius: 50%;
    margin-left: 30rpx;
}

.row_box .name {
    font-family: PingFang SC, PingFang SC;
    font-weight: 800;
    font-size: 28rpx;
    color: #000000;
}

.userState_text {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 24rpx;
    color: #999999;
    margin-left: 10rpx;
}

.sexBox {
    width: 60rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sex_icon {
    width: 20rpx;
    height: 20rpx;
}

.age_text {
    font-size: 28rpx;
}

.rows_item {
    font-weight: 400;
    font-size: 22rpx;
    padding: 6rpx 12rpx;
}

.tips_box {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 24rpx;
    color: #666666;
}

.bottom_infoBox {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10rpx;
}

.bottom_infoBox .Btn {
    width: 150rpx;
    height: 54rpx;
    background: #001c71;
    border-radius: 54rpx 54rpx 54rpx 54rpx;
    color: #ffffff;
    text-align: center;
    font-size: 24rpx;
    line-height: 54rpx;
}

.price_text {
    font-weight: 400;
    font-size: 24rpx;
    color: #001c71;
}

.tabs-box {
    width: 100vw;
    display: flex;
    white-space: nowrap;
    padding: 30rpx 36rpx;
    padding-bottom: 0;

  
}

.tabs-item {
    /* 宽度根据内容自适应 */
    flex-shrink: 0;
    height: 100%;
    display: inline-block;
    /* padding: 14rpx 10rpx; */
    border: 2rpx solid #e3e3e3;
    font-weight: 400;
    font-size: 24rpx;
    color: #4e4e4e;
    border-radius: 70rpx;
    margin-left: 30rpx;
    padding: 10rpx 20rpx;
}

.tabs-item:nth-child(1) {
    margin-left: 0;
}

.active_TZ {
    border: 2rpx solid #001c71;
    color: #001c71;
}

.Tz-box {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    box-sizing: border-box;
    padding: 0 40rpx;
}

.tz-item {
    width: 310rpx;
    height: 210rpx;
    margin-top: 50rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(/static/images/taizhuo_bg1.png);
    background-size: cover;
}

.set_info {
    padding: 6rpx 14rpx;
    box-shadow: 0rpx 0rpx 55rpx 0rpx rgba(0, 121, 63, 0.76);
    border-radius: 46rpx;
    color: #ffffff;
}

.set_info_loading {
}

/* 遮罩层 */
.mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99;
}

/* 弹窗样式 */
.popup {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #f7f8fa;
    border-radius: 24rpx 24rpx 0 0;
    z-index: 100;
    padding: 32rpx;
    box-sizing: border-box;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

.header {
    width: 100%;
    text-align: center;
    margin-bottom: 40rpx;
}

.subtitle {
    font-size: 24rpx;
    color: #666;
}

/* 时间选择器 */
.time-picker-box {
    display: flex;
    justify-content: space-between;
}

.time-section {
    width: 48%;
}

.time-label {
    display: block;
    font-weight: 400;
    font-size: 28rpx;
    color: #000000;
    margin-bottom: 20rpx;
    text-align: center;
}

.time-label2 {
    color: #999999;
    font-size: 22rpx;
}

.time-picker {
    height: 300rpx;
    background: #f5f5f5;
    border-radius: 12rpx;
}

.column-item {
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
}

/* 底部操作 */
.footer {
    margin-top: 40rpx;
    border-top: 2rpx solid #eee;
    padding-top: 32rpx;
}

.tipBox {
    width: 100%;
    border-radius: 16rpx;
    padding: 30rpx;
    background: #ffffff;
    box-sizing: border-box;
}

.tips1 {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.tips2 {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 24rpx;
    color: #999999;
    padding-top: 20rpx;
}

.submit-btn {
    margin-top: 64rpx;
    margin-bottom: 64rpx;
    background: #001c71;
    color: #fff;
    height: 88rpx;
    line-height: 88rpx;
    border-radius: 44rpx;
}
</style>
